<template>
	<div >
		<el-form label-width="120px" label-position="right">
			<el-row :gutter="20" class="container" style="margin:0px 10px;">
			  <el-col :span="6">
				  <div class="grid-content bg-purple1">
						<h2>{{details.productName}}</h2>
						<div>产品名称</div>
					</div>
				</el-col>
			 
				<el-col :span="6">
					<div class="grid-content bg-purple2" v-if="this.details.source == '生产入库'">
						<h2>{{details.batch}}</h2>
						<div>加工批号</div>
					</div>
					<div class="grid-content bg-purple2" v-if="this.details.source == '采购入库'">
						<h2>{{details.storageBatch}}</h2>
						<div>加工批号</div>
					</div>
				</el-col>
				
			  <el-col :span="6">
				  <div class="grid-content bg-purple3">
						<h2>{{details.createtime}}</h2>
						<div>加工时间</div>
					</div>
			  </el-col>
				  
				<!-- <el-col :span="6">
					<div class="grid-content bg-purple4">
						<h2>{{details.grade}}</h2>
						<div>品级</div>
					</div>
					
				</el-col> -->
			</el-row>
			<el-row class="container" style="margin:10px">
				<h3>检验检测</h3>
				<el-table
					style="margin-top:20px;"
                    :data="tableData"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header">
                   <el-table-column prop="organization" sortable label="检测机构"></el-table-column>
                   <el-table-column prop="standard" sortable label="检测标准"></el-table-column>
                   <el-table-column prop="detectionResult" label="检测结果"></el-table-column>
                   <el-table-column prop="time" sortable label="检测时间"></el-table-column>
                   <el-table-column prop="userName" sortable label="检测负责人"></el-table-column>
                </el-table>
				<!-- <el-col :span="12" style="margin-top:20px;">
					<el-form-item label="检测机构：">
						{{ruleForm.organization}}
					</el-form-item>
					<el-form-item label="检测标准：">
						{{ruleForm.standard}}
					</el-form-item>
					<el-form-item label="检测结果：">
						{{ruleForm.detectionResult}}
					</el-form-item>
					<el-form-item label="检测报告：">
						<img :src="$store.state.imageUrls + ruleForm.detectionImg" alt="" style="width:200px;height:200px;" v-if="ruleForm.detectionImg != '' && ruleForm.detectionImg != null">
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="检测负责人：" label-width="auto">
						{{ruleForm.userName}}
					</el-form-item>
					<el-form-item label="检测时间：" label-width="auto">
						{{ruleForm.time}}
					</el-form-item>
					
				</el-col> -->
			</el-row>
			<el-form-item class="footerFixed" label-width="0px">
			   
			    <el-button @click="backPage" >返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import { detection_findById } from "@/request/api"
	export default {
		data(){
			return{
				details:{},
				id:'',
				ruleForm:{},
				tableData:[]
			}
		},
		mounted() {
			this.id = this.$route.query.id
			this.details = this.$route.query.type
			this.details.createtime = this.details.createtime.substring(0,10)
			this.init()
		},
		methods:{
			backPage(){
				this.$router.go(-1)
			},
			init(){
				detection_findById(this.id).then((res)=>{
					this.tableData = res.data
				})
			}
		}
	}
</script>

<style scoped>
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple1 {
	    background: #409EFF 10000%;
	  }
	  .bg-purple2 {
	    background: #F56C6C 10000%;
	  }
	  .bg-purple3 {
	    background: #67C23A 10000%;
	  }
	  .bg-purple4 {
	    background: #909399 10000%;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 80px;
		color:white;
	  }
	  .grid-content div{
		  text-align: right;
		  font-size:14px;
		  margin-top:4px;
		  padding-right:20px;
	  }
	  .row-bg {
	    padding: 10px 0;
	    background-color: #f9fafc;
	  }
	  h2{
		  color:white;
		  text-align: right;
		  padding-top:20px;
		  padding-right:20px;
	  }
</style>
